
<template>
  <div class="min-h-screen">
    <!-- 英雄区域 -->
    <section class="relative h-screen flex items-center justify-center overflow-hidden">
      <div class="absolute inset-0 qinghua-gradient opacity-90"></div>
      
      <div class="relative z-10 text-center text-white px-4">
        <h1 class="text-5xl md:text-7xl font-bold mb-4 animate-pulse">
          青花泡泡
        </h1>
        <p class="text-xl md:text-2xl mb-8 opacity-90">
          东方美学 × 潮流文化
        </p>
        <button 
          @click="scrollToDolls"
          class="bg-white text-qinghua-blue px-8 py-3 rounded-full font-semibold hover:bg-opacity-90 transition-all transform hover:scale-105"
        >
          探索娃娃
        </button>
      </div>
      
      <!-- 装饰性青花瓷纹 -->
      <div class="absolute bottom-0 left-0 w-full h-32">
        <svg viewBox="0 0 1200 120" class="w-full h-full">
          <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" 
                fill="white" opacity="0.1"/>
        </svg>
      </div>
    </section>
    
    <!-- 娃娃展示区域 -->
    <section id="dolls" class="py-20 bg-white">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
          <h2 class="text-4xl font-bold text-qinghua-blue mb-4">青花系列</h2>
          <p class="text-lg text-qinghua-gray">每一件都是东方艺术的现代诠释</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <DollCard 
            v-for="doll in dolls" 
            :key="doll.id"
            :doll="doll"
            @click="goToProduct(doll.id)"
          />
        </div>
      </div>
    </section>
    
    <!-- 3D 展示区域 -->
    <section class="py-20 bg-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
          <h2 class="text-4xl font-bold text-qinghua-blue mb-4">360° 细节展示</h2>
          <p class="text-lg text-qinghua-gray">拖动旋转，欣赏青花瓷的每一处纹理</p>
        </div>
        
        <div class="bg-white rounded-2xl shadow-2xl overflow-hidden">
          <ThreeDViewer />
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import DollCard from '@/components/DollCard.vue'
import ThreeDViewer from '@/components/ThreeDViewer.vue'

const router = useRouter()

const dolls = ref([
  {
    id: 1,
    name: '青花仙子',
    price: 299,
    image: '/images/doll1.jpg',
    rarity: '限量',
    description: '传统青花瓷纹与现代设计的完美结合'
  },
  {
    id: 2,
    name: '青花舞者',
    price: 399,
    image: '/images/doll2.jpg',
    rarity: '珍藏',
    description: '优雅的舞姿中流淌着千年瓷韵'
  },
  {
    id: 3,
    name: '青花精灵',
    price: 199,
    image: '/images/doll3.jpg',
    rarity: '普通',
    description: '小巧精致，随身携带的东方美学'
  }
])

const scrollToDolls = () => {
  document.getElementById('dolls').scrollIntoView({ behavior: 'smooth' })
}

const goToProduct = (id) => {
  router.push(`/product/${id}`)
}
</script>
